<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-input
            v-model="formSearch.order_no"
            placeholder="搜索订单编号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formSearch.namePhone"
            placeholder="请输入鉴定人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formSearch.shopName"
            placeholder="请输入商品名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formSearch.order_status"
            clearable
            filterable
            placeholder="请选择鉴定状态"
            style="width: 250px"
          >
            <el-option label="无法鉴定" value="2"></el-option>
            <el-option label="真" value="1"></el-option>
            <el-option label="未鉴定" value="3"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="formSearch.deliver_id"
            clearable
            filterable
            placeholder="分类"
            style="width: 250px"
          >
            <el-option label="邮寄" value="1"></el-option>
            <el-option label="自取" value="2"></el-option>
            <el-option label="点位自购" value="3"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <el-button icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="table"
        :height="height - 170"
        :data="tableData"
        :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column type="index" width="70" label="序号"></el-table-column>

        <el-table-column
          prop="orderCode"
          label="订单编号"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="orderTypeName"
          label="订单类型"
          width="100"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>

        <el-table-column
          prop="appraiserName"
          label="鉴定人"
          width="100"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="petName"
          label="提交人"
          width="100"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>

        <el-table-column
          prop="goodsInfo"
          label="产品信息"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          prop="resultMsg"
          label="鉴定状态"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
      <!--  <el-table-column
          prop="payAmount"
          label="实付金额"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column> -->
        <!-- <el-table-column
          prop="receivingAddress"
          label="用户地址"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column> -->
        <el-table-column
          prop="create_time"
          label="下单时间"
          width="200"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>

        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="scope.row.IdentificationResults == 3 && permission.look"
              @click="daliogClick(scope.row, '1')"
              >鉴定结果提交</el-link
            >
            <el-link
              type="primary"
              @click="recycle(scope.row)"
              v-if="
                scope.row.IdentificationResults == 1 &&
                scope.row.recoveryState == 1
              "
              >回收</el-link
            >
            <el-link
              type="primary"
              @click="daliogClick(scope.row, '2')"
              v-if="permission.deali"
              >详情</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog
        :title="type == '1' ? '鉴定信息' : '鉴定详情'"
        top="4vh"
        :visible.sync="visible"
        width="50%"
        @close="resetForm('ruleForm')"
      >
        <div class="cardcontent">
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">用户提交酒品</div>
              <div class="goods_number">
                {{ detailsData.goodsName }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">订单编号</div>
              <div class="goods_number">
                {{ detailsData.orderCode }}
              </div>
            </div>
            <div class="news_title">
              <div class="goods_name">初鉴估价</div>
              <div class="goods_number">
                {{ detailsData.evaluation }}
              </div>
            </div>
          </div>
          <div class="content_list">
            <div class="news_title">
              <div class="goods_name">鉴定人</div>
              <div class="goods_number">{{ detailsData.appraisalName }}</div>
            </div>
            <div class="news_title">
              <div class="goods_name">初鉴人</div>
              <div class="goods_number">{{ detailsData.optAppraiserName }}</div>
            </div>
            <div class="news_title">
              <div class="goods_name">初鉴流水号</div>
              <div class="goods_number">
                {{ detailsData.IdentificationNumber }}
              </div>
            </div>
          </div>

          <div class="content_img">
            <div
              class="contImgText"
              v-for="(item, index) in detailsData.pictures"
              :key="index"
            >
              <img
                style="width: 120px; height: 120px"
                :src="item.picture"
                alt=""
              />
              <span v-if="index == 0" style="margin-top: 20px">瓶口</span>
              <span v-if="index == 1" style="margin-top: 20px">瓶身</span>
              <span v-if="index == 2" style="margin-top: 20px">瓶身</span>
              <span v-if="index == 3" style="margin-top: 20px">瓶底</span>
            </div>
          </div>
        </div>
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="110px"
          style="padding-top: 20px"
          :rules="rules"
          :disabled="type == '2'"
        >
          <el-form-item label="用户提交备注">
            <el-input
              disabled
              type="textarea"
              :rows="5"
              placeholder="请输入备注"
              v-model="ruleForm.remark"
            ></el-input>
          </el-form-item>
          <el-form-item label="鉴定结果">
            <el-radio v-model="ruleForm.radioType" label="1">真</el-radio>
            <el-radio v-model="ruleForm.radioType" label="2">无法鉴定</el-radio>
          </el-form-item>
          <el-form-item
            label="回收价格"
            prop="price"
            v-if="ruleForm.radioType == '1'"
            :rules="[
              {
                required: true,
                message: '不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              v-model="ruleForm.price"
              style="width: 300px"
              oninput="this.value=this.value.replace(/[^\d]/g,'')"
              placeholder="请输入价格"
              clearable
            ></el-input>
          </el-form-item>

          <el-form-item label="鉴定理由">
            <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入鉴定理由"
              v-model="ruleForm.reason"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>

          <el-button
            v-if="type == 1"
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "保 存" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  MAIN,
  recoveryOrder,
  recoveryInfo,
  recoveryAppraisal,
  appraisalPayment,
} from "../../utils/api";

export default {
  name: "StoreLog",
  props: ["height"],

  data() {
    return {
      tableData: [{ id: 1, order_no: "424242d" }],
      ruleForm: {
        expressNumber: "",
        remark: "",
        radioType: "1",
        price: "",
        refundPrice: "",
        reason: "",
      },
      type: "",
      detailsData: {},
      rules: {
        // price: [
        //   {
        //     required: true,
        //     message: "不能为空",
        //     trigger: "change",
        //   },
        // ],
      },
      permission: {
        deali: false,
        look: false,
      },
      confirmLoading: false,
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      currentRow: {}, //当前行数据信息
      errImg: 'this.src="' + require("../../../static/img/user.png") + '"',
      formSearch: {
        order_no: "",
        order_status: "",
        deliver_id: "",
        namePhone: "",
        shopName: "",
      }, //搜索
      deliver: {}, //送菜员下拉
      visible: false,
      userInfo: {},
    };
  },

  mounted() {
    this.getData();
    // this.deliverSelects(); //商家下拉列表
    const userinfo = JSON.parse(sessionStorage.getItem("userInfo")); //解密,获取用户登录信息
    this.userInfo = userinfo;
    let arr = userinfo.menu_id.split(",");
    // console.log(arr)
    // 详情 130
    // 提交鉴定 131

    if (arr.indexOf("130") > -1) {
      this.permission.deali = true;
    }
    if (arr.indexOf("131") > -1) {
      this.permission.look = true;
    }
  },
  methods: {
    // 回收
    recycle(row) {
      console.log(row);
      let params = {
        userId: this.userInfo.id,
        id: row.id,
      };
      this.postRequest(appraisalPayment, params, MAIN).then((res) => {
        if (res.code === 200) {
          this.$notify.success(res.msg);
          this.getData();
        }
      });
    },
    daliogClick(row, type) {
      this.visible = true;
      this.type = type;
      this.postRequest(recoveryInfo, { id: row.id }, MAIN).then((res) => {
        if (res.code === 200) {
          this.detailsData = res.data;
          this.ruleForm.remark = res.data.remarks;
          this.ruleForm.price = res.data.recoveryPrice;
          this.ruleForm.radioType = String(res.data.IdentificationResults);
          this.ruleForm.reason = res.data.reason;
          this.ruleForm.refundPrice = res.data.refundPrice
            ? res.data.refundPrice
            : "";
            // if(type == '1') {
            //   this.ruleForm.price = ''
            // }
        }


      });
    },

    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) return false;
        this.confirmLoading = true;

        let params = {
          id: this.detailsData.id,
          userId: this.userInfo.id,
          IdentificationResults: this.ruleForm.radioType,
          recoveryPrice: this.ruleForm.price,
          reason: this.ruleForm.reason,
        };
        this.postRequest(recoveryAppraisal, params).then((res) => {
          if (res.code === 200) {
            this.$notify.success(res.msg);
            this.visible = false;
            this.confirmLoading = false;

            this.getData();
          }
          this.confirmLoading = false;
        });
      });
    },
    //获取初始数据
    getData() {
      this.loading = true;
      let params = {
        orderCode: this.formSearch.order_no,
        nameOrPhone: this.formSearch.namePhone,
        IdentificationResults: this.formSearch.order_status,
        goodsTypeId: this.formSearch.deliver_id,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        goodsName: this.formSearch.shopName,
      };
      // return (this.loading = false);
      this.postRequest(recoveryOrder, params, MAIN).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.loading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },
    grantClick() {},
    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },

    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },

    //查询
    search() {
      this.getData();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.type = "";
      this.ruleForm = {
        expressNumber: "",
        remark: "",
        radioType: "1",
        price: "",
        refundPrice: "",
        reason: "",
      };
    },
  },
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}

.news_title {
  display: flex;
  padding-top: 27px;
  flex: 1;
}
.cardcontent {
  padding: 20px 20px;
  padding-top: 0px;
  opacity: 1;
  border-radius: 4px;
}
.content_list {
  display: flex;
  justify-content: space-between;
}
.goods_list {
  padding: 20px 20px 30px 20px;
}

.goods_name {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(62, 63, 66, 1);
}
.goods_number {
  font-size: 16px;
  font-family: Microsoft YaHei;
  color: rgba(158, 160, 165, 1);
  padding-left: 20px;
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*想省略几行就写几*/
  -webkit-box-orient: vertical;
  line-height: 20px;
}
.content_img {
  display: flex;
  margin-top: 30px;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}
.contImgText {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
